<!DOCTYPE html>
<title>Overflow menu hides when clicking on the page even when propagation is stopped.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../media-controls.js'></script>
<video controls></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  enableTestMode(video);
  video.src = '../content/test.ogv';
  const track = video.addTextTrack('captions');

  // Listener blocking propogation.
  window.addEventListener('click', e => e.stopPropagation(), true);

  video.onloadeddata = t.step_func(() => {
    const menu = overflowMenu(video);

    singleTapOnControl(overflowButton(video), t.step_func(() => {
      assert_not_equals(getComputedStyle(menu).display, 'none');

      // Click anywhere outside the overflow menu should close overflow list.
      const coords = coordinatesOutsideElement(menu);
      singleTapAtCoordinates(coords[0], coords[1], t.step_func_done(() => {
        assert_equals(getComputedStyle(menu).display, 'none');
      }));
    }));
  });
});
</script>
